<template>
  <div>当前数据{{ num }}</div>
  <input @input="(e) => (num = e.target.value)" :value="num" type="text" />
  <div>
    使用v-model来实现：
    <input type="text" v-model="num" />
  </div>
  <button @click="add">新增</button>
  <button :disabled="num === 0" @click="decrease">减少</button>
  <div>---------------</div>
  <div class="name" v-for="item in arr" :key="item">
    <div>item:{{ item }}</div>
  </div>
  <div>---------------</div>
  <div class="name" v-for="(item, index) in arr">
    <div>item:{{ item }}</div>
    <div>index:{{ index }}</div>
  </div>
  <div>-------------</div>
  <div class="name" v-for="(element, xxx) in arr">
    <div>item:{{ element }}</div>
    <div>index:{{ xxx }}</div>
  </div>
  <div>-------------</div>
  <div v-for="(item, index) in arr1" :key="item.id">
    <div>id:{{ item.id }}</div>
    <div>名字:{{ item.name }}</div>
  </div>
  <div>-------------</div>
  <div v-for="(value, key) in obj">
    <div>value:{{ value }}</div>
    <div>key:{{ key }}</div>
  </div>

  <div>-------------</div>
  <div v-for="(item, index) in arr1" :key="item.id">
    <div>id:{{ item.id }}</div>
    <div>名字:{{ item.name }}</div>
    <button v-if="false">提醒</button>
  </div>
  <div>-------------</div>
  <div v-html="htmlString"></div>
  <div>{{ htmlString }}</div>
  <div>-------------</div>
  <div v-for="(item, index) in arr2" :key="item.id">
    <div>id:{{ item.id }}</div>
    <div>名字:{{ item.name }}</div>
    <button v-if="false">提醒</button>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";

// for (let index = 0; index < arr.value.length; index++) {
//   const element = array[index];
// }
const htmlString = ref("<div>测试测试</div>");
const num = ref(2);
const arr = ref([1, 2, 3]);

let arr2 = reactive([
  { id: 1, name: "小明", age: 18 },
  { id: 2, name: "小红", age: 20 },
  { id: 3, name: "小绿", age: 30 },
]);

const arr1 = ref([
  { id: 1, name: "小明", age: 18 },
  { id: 2, name: "小红", age: 20 },
  { id: 3, name: "小绿", age: 30 },
]);
const obj = ref({
  name: "小明",
  age: 18,
});

const fn = () => {
  arr1.value[0];
  arr2 = reactive([1, 2, 3]);
};
const disabled = ref(true);
const add = () => {
  num.value++;
  disabled.value = false;
  // num.value = num.value +1
};

const decrease = () => {
  num.value--;
  if (num.value === 0) {
    disabled.value = true;
  }
  // num.value = num.value - 1
};
</script>
<style></style>
